<template>
  <div style="height: 85vh;display: flex;flex-direction: column">
    <Title></Title>
    <div style="flex: 1;width: 100%;overflow: scroll;scroll-behavior: auto;background-color: #fff;border: 1px solid gray" id="mainText">
      <div v-for="(item, key) in chatList" style="width: 100%;display: flex">
        <div style=";max-width: 50%;background-color: #e6e6e6;padding: 8px;margin-top: 5px;margin-bottom: 5px;
border-radius: 10px;color: black;
" :style='item.type!==0?"margin-left: auto;min-width: 100px;background-color: #1c1e1f;color:white":""'>
          {{ item.msg }}
        </div>

      </div>

    </div>
    <div style="height: 100px;width: 100%;display: flex;align-items: center;
padding-left: 20px;padding-right: 20px;background-color: #fff;
">
      <input placeholder="输入你的问题" v-model="chatStr" style="width: 100%;height: 100%;flex: 1"/>
      <p style="display: inline-block;cursor: pointer;font-size: 14px" @click="sendMsg">发送</p>
    </div>
  </div>
</template>

<script>
import {editcarapi, gpt} from "../../api/http";
import fa from "element-ui/src/locale/lang/fa";
import Title from "../../components/title.vue";

export default {
  name: "GptPage",
  components: {Title},
  data() {
    return {
      chatStr: "",
      chatList: [],
      isSend: false
    }
  },
  methods: {
    async gpt() {
      if (this.isSend) {
        alert("请等上次聊天结束")
        return
      }
      var msgStr=this.chatStr
      this.chatStr=""
      this.chatList.push(
        {
          type: 1,
          msg: msgStr
        }
      )
      this.$nextTick(() => {
        setTimeout(() => {
          const textarea = document.getElementById('mainText');
          if (textarea) {
            textarea.scrollTop = textarea.scrollHeight;
          }
        }, 10);
      });

      this.isSend = true
      const res = await gpt(msgStr)
      this.isSend = false
      console.log("res====> ", res)
      if (res.status === 200) {
        var list = res.data.choices
        console.log("choices====> ", list[0].message.content)
        var msg = list[0].message.content
        this.chatList.push(
          {
            type: 0,
            msg: msg
          }
        )
        this.$nextTick(() => {
          setTimeout(() => {
            const textarea = document.getElementById('mainText');
            if (textarea) {
              textarea.scrollTop = textarea.scrollHeight;
            }
          }, 10);
        });
      }
    },
    sendMsg() {
      this.gpt()
    }
  },
  mounted: function () {
    this.f1()
  }
}
</script>

<style scoped>
#mainText::-webkit-scrollbar {
  display: none
}

</style>
